<template>
    <div class="rank-box">
        <!-- 施工队等级配置 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <el-button class="reviseBtn" @click="reviseFn"><i class="iconfont icon-xiugai" v-if="checkPermi(['system:team:edit'])"></i>
            修改
        </el-button>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" :limit="pageSize"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange"
            :tableHeaderData="inventoryTableHeaderData" :tableData="inventoryTableData">
        </forTableCom>

        <PopUps :bgIndex="1000"  :boxIndex="1001" widthMy='30%'  height-my="28%" v-if="PopUpsFlag">
            <div class="flex"
                style="display: flex; align-items: center; flex-direction: column; justify-content: space-evenly;height: 100%; width: 100%; padding-left: 10px; position: relative;">
                <p @click="PopUpsFlag = false"
                    style="background-color: blue; cursor: pointer; border-radius: 50%; height: 20px; width: 20px; color: aliceblue; position: absolute; top: 0%; right: 0; text-align: center; line-height: 20px;">
                    ×</p>
                <el-form ref="formRef" :inline="true" :model="popUpsForm" :rules="rules" class="demo-form-inline">
                    <el-form-item label="施工队等级">
                        <el-select v-model="popUpsForm.UpdateConstructionTeamRank" clearable>
                            <el-option :label="item1.label" :value="item1.value" v-for="(item1, index) in selectTeamRank"
                                :key="index" />
                        </el-select>
                        <el-button @click="updateTeamRank" style="cursor: pointer">修改</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </PopUps>
    </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue'
import { ref, onMounted, proxyRefs } from 'vue';
import { listTeams,editRank } from '@/api/teams'
import PopUps from '@/components/My/PopUps';
import { ElMessage, ElMessageBox } from 'element-plus'
import { checkPermi } from "@/utils/permission.js";

const { proxy } = getCurrentInstance();

let PopUpsFlag = ref(false)

let popUpsForm = reactive({
    UpdateConstructionTeamRank: ''
})
let selectTeamRank = ref([{
    label: 'A级',
    value: 'A级'
},
{
    label: 'B级',
    value: 'B级'
},
{
    label: 'C级',
    value: 'C级'
},
{
    label: 'D级',
    value: 'D级'
}])
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])


// 勾选背景id
const idActive = 'constructionTeamId'

// 表单
let inventoryForm = ref(
    {
        constructionTeamId: '',             // 施工队编号
        constructionTeamName: '',           // 施工队名称
        constructionPhone: '',          // 施工队电话
        constructionTeamType: '',           // 施工队类别
    }
)
// 表单数据标题
let inventoryFormLabel = ref([
    {
        name: 'constructionTeamId',
        label: '施工队编号',
    },
    {
        name: 'constructionTeamName',
        label: '施工队名称',
    },
    {
        name: 'constructionPhone',
        label: '施工队电话',
    },
    {
        name: 'constructionTeamType',
        label: '施工队类别',
        type: 'select',
        client: [
            {
                label: '固定施工队',
                value: '0'
            },
            {
                label: '临时施工队',
                value: '1'
            },
        ]
    }
])

// 表格表头数据
let inventoryTableHeaderData = ref([
    {
        prop: 'constructionTeamId',
        label: '施工队编号',
        colorClassName: 'activeColor'
    },
    {
        prop: 'constructionTeamRegion',
        label: '施工队区域',
        colorClassName: 'activeColor'
    },
    {
        prop: 'constructionTeamName',
        label: '施工队名称'
    },
    {
        prop: 'constructionTeamType',
        label: '施工队类别'
    },
    {
        prop: 'constructionPhone',
        label: '施工队电话'
    },
    {
        prop: 'constructionTeamRank',
        label: '施工队等级'
    },
    {
        prop: 'orderNum',
        label: '接单数量'
    },
    {
        prop: 'completionRate',
        label: '完成率'
    },

])
// 表格数据内容
let inventoryTableData = ref([])

// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
}
const reviseFn = () => {

    if (multipleSelection.value.length == 1) {
        PopUpsFlag.value = true
        popUpsForm.UpdateConstructionTeamRank = multipleSelection.value[0].constructionTeamRank
    } else {
        ElMessage({
            type: 'warning',
            message: '勾选一个@^@',
        })
    }
}
const updateTeamRank = async () => {
    
    let params = {
        constructionTeamId: multipleSelection.value[0].constructionTeamId,
        constructionTeamRank: popUpsForm.UpdateConstructionTeamRank
    }
    let {code,msg} = await editRank(params)
    if(code==200){
        proxy.$modal.msgSuccess(msg);
        PopUpsFlag.value = false
        listTeamsFn()
    }
}
// 查询数据
const listTeamsFn = async (data = '') => {
    let res = await listTeams(data)
    let { code, rows, total } = res
    if (code == 200) {
        rows.forEach((v) => {
            // 完成率
          v.completionRate = ((v.succeedNum / v.orderNum) * 100).toFixed(2) === 'NaN'? '暂无': ((v.succeedNum / v.orderNum) * 100).toFixed(2) + '%'
        })
        // 改变日期显示长度问题
        inventoryTableData.value = rows
        totals.value = total
    }
}
// 查找
const onSearch = (v) => {
    // 每次查询后回到页1
    pageNum.value = 1
    listTeamsFn(v)
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit
    let obj = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(obj, inventoryForm.value)
    listTeamsFn(params)
}

onMounted(() => {
    listTeamsFn()
})
</script>
<style scoped lang='scss'>
.rank-box {
    padding: 16px;
}
</style>
